<template>
  <div class="phone-query">
    <!-- 网站标题 -->
    <div class="site-title-container">
      <h1 class="site-title">手机号归属地查询</h1>
    </div>

    <!-- 查询输入卡片和查询结果卡片 -->
    <div class="card-container">
      <el-card class="query-card" shadow="hover">
        <h3 class="tips">输入手机号前3位查询运营商信息</h3>
        <el-input
            v-model="prefix"
            placeholder="请输入手机号前三位"
            class="input-box"
            @input="queryOperator"
            clearable
            prefix-icon="el-icon-phone"
        />
        <h3 class="tips">输入11位手机号查询归属地信息</h3>
        <el-input
            v-model="phoneNumber"
            placeholder="请输入完整手机号"
            class="input-box"
            @blur="queryLocation"
            clearable
            prefix-icon="el-icon-mobile-phone"
        />
        <!-- 这里是显示提示信息的部分 -->
        <p v-if="phoneNumber.length !== 11 && phoneNumber.length > 0" class="error-message">
          请输入正确手机号哦
        </p>
      </el-card>

      <!-- 查询结果卡片 -->
      <el-card class="query-card" shadow="hover">
        <h2 v-if="location" class="title">{{ phoneNumber }} 查询结果</h2>
        <div v-if="operator || location" class="result">
          <p v-if="operator">运营商：{{ operator }}</p>
          <p v-if="location">归属地：{{ location }}</p>
        </div>
        <div v-else class="no-data">
          <p>暂无查询结果</p>
        </div>
      </el-card>
    </div>
  </div>
</template>


<script>
import axios from 'axios';

export default {
  data() {
    return {
      prefix: '',
      phoneNumber: '',
      operator: '',
      location: ''
    };
  },
  methods: {
    async queryOperator() {
      this.location = '';
      if (this.prefix.length === 3) {
        try {
          const response = await axios.get(
              `https://cn.apihz.cn/api/ip/shouji.php?id=10002008&key=2e44acb6f412de66a4576076d03624e9&phone=${this.prefix}000000`
          );
          if (response.data.code === 200) {
            this.operator = response.data.fuwushang; // 获取运营商
          } else {
            this.location = `${response.data.msg}`;
            this.$message.error('无法获取运营商信息');
          }
        } catch (error) {
          this.$message.error('获取运营商失败');
        }
      }
    },
    async queryLocation() {
      if(this.phoneNumber.length === 11){
        try {
          const requestUrl = `/api/phone/queryLocation/${this.phoneNumber}`;
          const response = await axios.get(requestUrl);
          console.log('Requesting:', requestUrl);
          // 检查返回的 code 是否为 200
          if (response.data.code === 200) {
            // 从 data 中提取 'shengfen' 和 'chengshi'，并组合成“河北唐山”
            this.location = `${response.data.data.shengfen} ${response.data.data.chengshi}`;
          } else {
            // 如果 code 不为 200，显示错误信息
            this.location = `${response.data.msg}`;
            this.$message.error('无法获取归属地信息');
          }
        } catch (error) {
          // 请求失败时，显示错误信息
          this.$message.error('获取归属地失败');
        }
      }
    }

  }
};
</script>

<style scoped>
/* 页面主体 */
.phone-query {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* 保持上下排列 */
  height: 100vh; /* 使容器高度填满视口 */
  margin: -10px; /* 去掉默认的边距 */
  padding: -10px; /* 去掉默认的内边距 */
  background: url('https://imgse.com/content/images/system/home_cover_1601010270144_8921bc.jpg') no-repeat center center fixed;
  background-size: auto; /* 背景图自适应填充整个容器 */
  position: relative; /* 保证背景图位于容器底部 */
  overflow: hidden; /* 防止出现滚动条 */
}


/* 网站标题容器 */
.site-title-container {
  width: 100%;
  text-align: center; /* 标题居中 */
  padding-top: 40px; /* 给标题上方留些空间 */
}

.site-title {
  font-size: 50px;
  color: #f4f4f4; /* 字体颜色为黑色 */
  font-weight: bold;
  background-color: transparent; /* 背景透明 */
  margin-bottom: 10px;
}

/* 卡片容器 */
.card-container {
  display: flex;
  justify-content: space-between; /* 水平分布两个卡片 */
  align-items: center; /* 垂直居中 */
  gap: 20px; /* 卡片之间的间距 */
  width: 100%;
  max-width: 1200px; /* 最大宽度 */
  margin-top: 40px; /* 卡片与标题之间的间距 */
}

.tips {
  text-align: center;
  color: #63e3ae;
  margin-bottom: 20px;
  animation: fadeIn 1s ease-in-out, colorBreathing 2s infinite ease-in-out;
}

/* 查询卡片样式 */
.query-card {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex: 1; /* 让卡片平分空间 */
  max-width: 48%; /* 卡片最大宽度为容器的一半 */
  min-width: 350px; /* 卡片最小宽度 */
  height: 400px; /* 设置固定高度 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
}

.no-data {
  text-align: center;
  font-size: 24px; /* 放大文字 */
  font-weight: bold; /* 加粗文字 */
  color: #ff4d4f; /* 选择一种醒目的颜色 */
  margin-top: 20px;
}

.query-card:hover {
  transform: scale(1.05);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3); /* 增强阴影效果 */
}

.title {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  color: #080b0b;
  margin-bottom: 20px;
}

@keyframes colorBreathing {
  0% {
    color: #63e3ae;
  }
  50% {
    color: #409eff;
  }
  100% {
    color: #63e3ae;
  }
}

.input-box {
  margin-bottom: 20px;
  animation: fadeIn 0.5s ease-in-out;
}

.operator-result,
.location-result {
  margin-top: 20px;
  text-align: center;
  animation: fadeIn 0.5s ease-in-out;
}

.operator-result .el-tag,
.location-result .el-tag {
  font-size: 16px;
}

.result {
  margin-top: 40px;
  text-align: center;
  font-size: 50px;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 响应式布局 */
@media (max-width: 768px) {
  .card-container {
    flex-direction: column; /* 小屏幕时改为垂直排列 */
    gap: 10px;
  }

  .query-card {
    max-width: 100%; /* 小屏幕下卡片占满全宽 */
  }
}



</style>
